<template>
    <div class="container">
        <h3>新增仓库</h3>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div v-if="showForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="仓库名称：">
                            {{ruleForm.name}}
                        </el-form-item>
                        <el-form-item label="仓储方式：">
                            {{ruleForm.storeMethod}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="仓库地址：">
                            {{ruleForm.address}}
                        </el-form-item>
                        <el-form-item label="仓储条件：">
                            {{ruleForm.storeCondition}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item class="footerFixed">
                    <el-button type="primary" @click="submitForm">确认无误</el-button>
                    <el-button @click="showForm = false">返回修改</el-button>
                </el-form-item>
            </div>
            <div v-else>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="仓库名称：" prop="name">
                            <el-input placeholder="请输入内容" v-model.trim="ruleForm.name" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="仓储方式：">
                            <el-input placeholder="请输入内容" v-model.trim="ruleForm.storeMethod" style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="仓库地址：" prop="address">
                            <el-input placeholder="请输入内容" v-model.trim="ruleForm.address" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="仓储条件：">
                            <el-input placeholder="请输入内容" v-model.trim="ruleForm.storeCondition" style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item class="footerFixed">
                    <el-button type="primary" @click="submitRules('ruleForm')">提交</el-button>
                    <el-button @click="backPage">返回</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>    
</template>

<script>
import {warehouse_save,warehouse_findByWarehouseId,warehouse_update} from "@/request/api";
    export default {
        data() {
            return {
                showForm: false,
                ruleForm: {
                    name: '',
                    address: '',
                    storeMethod: '',
                    storeCondition: '',
                },
                rules: {
                    name: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                    ],
                    address: [
                        { required: true, message: '不能为空', trigger: 'blur' },
                    ]
                }
            };
        },
        mounted(){
            this.id = this.$route.query.id
            if (this.id == undefined) {
                this.$store.commit('removeRuform','')
            } else {
                this.init()
            }
        },
        methods: {
            backPage () {
                this.$router.go(-1);
            },
            init(){
                warehouse_findByWarehouseId(this.id).then((res) =>{
                    this.ruleForm = res.data
                })
            },
            submitRules(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        
                        this.showForm = true
                    } else {
                        return false;
                    }
                })
            },
            submitForm() {
                if(this.id == undefined){
                    warehouse_save(this.ruleForm).then((res) => {
                        this.$notify({
                            title: '提示',
                            message: '保存成功',
                            type: 'success',
                            duration:1000
                        });
                        this.backPage()
                    })
                } else{
                    warehouse_update(this.ruleForm).then((res) => {
                        this.$notify({
                            title: '提示',
                            message: '修改成功',
                            type: 'success',
                            duration:1000
                        });
                        this.backPage()
                    })
                }
            },
        }
    }
</script>

<style scoped lang="less">
.demo-ruleForm{
    margin-top: 10px;
}
.demo-ruleForm .el-radio--small.is-bordered{
    width: 120px !important;
    margin-right: 10px !important;
}
</style>